<template>
    <div class="goods-desc">
        <h3>4、商品描述图片：</h3>
        <el-upload
                ref="file"
                class="upload-demo"
                :file-list="desc"
                action="https://jsonplaceholder.typicode.com/posts/"
                :auto-upload="false"
                :on-change="handleChange"
                :on-remove="handleRemove"
                name="goodsDesc"
                list-type="picture"
                >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb,注意图片顺序，每次上传一张</div>
        </el-upload>
    </div>
</template>

<script>
    export default {
        name: "GoodsDesc",
        props: {
            desc: {
                type: Array,
                default: []
            },
            isEdit: {
                type: Boolean,
                default: false
            }
        },
        data() {
         return {
             addDescFile: [],
             delDescFile: []
         }

        },
        methods: {
            handleChange(file, fileList) {
                if (this.isEdit) {
                    this.addDescFile.push({img: file.raw, url: file.url})
                }else {
                    this.desc.push({img: file.raw, url: file.url});
                }

            },
            handleRemove(file, fileList) {
             if (this.isEdit) {
                this.delDescFile.push(file.url)
             }else {
                 let num;
                 this.desc.filter((item, index)=> {
                     if (item.img.uid === file.img.uid) {
                         return num = index
                     }
                 })
                 this.desc.splice(num, 1);
             }
            },
            clearFiles() {
                this.$refs.file.clearFiles();
            }
        }
    }
</script>

<style scoped>
    .goods-desc {
    }
</style>